<template>
  <el-dialog v-if="load" title="导出产品开发提成报表" v-model="visible" align-center width="800px" @close="handleClose" :close-on-click-modal="false">
    <el-form :model="formData" label-width="120px" :rules="rules" inline ref="ruleFormRef" class="formw200">
      <el-form-item label="发货时间:" prop="value">
        <el-date-picker
          v-model="formData.value"
          type="monthrange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          valueFormat="YYYY-MM-DD"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" :loading="loadings.submit" @click="close">确认</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from "element-plus"
import { commissionSettingExport } from "../api"
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const emit = defineEmits(["close"])
const data = reactive({
  formData: {},
})
const rules = reactive({
  value: [{ required: true, message: "请选择", trigger: "change" }],
})

const { formData } = toRefs(data)
// 打开弹窗
const open = async (params = {}) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  formData.value.setting_id = params.id
  loadings = reactive({})
  visible.value = true
}
// 关闭弹窗
const close = () => {
  let { validate } = ruleFormRef.value
  validate((valid) => {
    if (valid) {
      commissionSettingExport({
        shipping_time_start: formData.value.value[0],
        shipping_time_end: formData.value.value[1],
        setting_id: formData.value.setting_id,
      }).then((res) => {
        ElMessage({ message: "导出成功", type: "success" })
        emit("close")
        visible.value = false
      })
    }
  })
}
const ruleFormRef = ref()
const handleClose = () => {
  emit("close")
}
// 提交
const submit = () => {
  loadings.submit = true
}
defineExpose({ open })

const shortcuts = [
  {
    text: "上个月",
    value: () => {
      const start = new Date()
      start.setDate(0)
      start.setDate(1)
      const end = new Date()
      end.setDate(0)
      return [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 0))]
    },
  },
]
</script>
<style lang="scss" scoped></style>
